<template>
  <view class="container">
    <x-map
      v-if="isMapReady"
      v-model:latitude="latitude"
      v-model:longitude="longitude"
      :markers="markers"
      @tap="onMapTap"
      @markertap="onMarkerTap"
    />
    <view class="info">
      <text>当前位置：{{ latitude }}, {{ longitude }}</text>
      <text>标记点数量：{{ markers.length }}</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import xMap from '@/uni_modules/x-map/components/x-map.vue'

const latitude = ref(35.86166)
const longitude = ref(104.195397)
const markers = ref([])
const isMapReady = ref(false)

// 生成随机标记点
const generateRandomMarkers = () => {
  const newMarkers = []
  for (let i = 0; i < 100000; i++) {
    const lat = 20 + Math.random() * 20  // 纬度范围: 20°N 到 40°N
    const lng = 75 + Math.random() * 60  // 经度范围: 75°E 到 135°E
    newMarkers.push({
      id: i,
      latitude: lat,
      longitude: lng,
      title: `标记点${i}`
    })
  }
  markers.value = newMarkers
  isMapReady.value = true  // 标记点生成后再显示地图
}

onMounted(() => {
  generateRandomMarkers()
})

const onMapTap = (e) => {
  console.log('地图点击', e)
}

const onMarkerTap = (e) => {
  console.log('标记点点击', e)
}
</script>

<style scoped>
.container {
  position: relative;
  width: 100vw;
  height: calc(100vh - 44px);
}

.info {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 12px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
  font-size: 14px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
</style> 